<template>
    <div class="drag" ref="dragDiv">
        <div class="drag_bg"></div>
        <div class="drag_text">{{ confirmWords }}</div>
        <div
            ref="moveDiv"
            @mousedown="mouseDownFn($event)"
            :class="{ handler_ok_bg: confirmSuccess }"
            class="handler handler_bg"
            style="position: absolute; top: 0px; left: 0px;"
        ></div>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            beginClientX: 0 /*距离屏幕左端距离*/,
            mouseMoveState: false /*触发拖动状态  判断*/,
            maxWidth: "" /*拖动最大宽度，依据滑块宽度算出来的*/,
            confirmWords: "请按住滑块，拖动到最右边" /*滑块文字*/,
            confirmSuccess: false /*验证成功判断*/
        };
    },
    methods: {
        //mousedown 事件
        mouseDownFn: function(e) {
            if (!this.confirmSuccess) {
                e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件
                this.mouseMoveState = true;
                this.beginClientX = e.clientX;
            }
        },
        //验证成功函数
        successFunction() {
            this.$store.commit("statestatus", true);
            this.confirmSuccess = true;
            this.confirmWords = "验证通过";
            if (window.addEventListener) {
                document
                    .getElementsByTagName("html")[0]
                    .removeEventListener("mousemove", this.mouseMoveFn);
                document
                    .getElementsByTagName("html")[0]
                    .removeEventListener("mouseup", this.moseUpFn);
            } else {
                document
                    .getElementsByTagName("html")[0]
                    .removeEventListener("mouseup", () => {});
            }
            document.getElementsByClassName("drag_text")[0].style.color =
                "#fff";
            document.getElementsByClassName("handler")[0].style.left =
                this.maxWidth + "px";
            document.getElementsByClassName("drag_bg")[0].style.width =
                this.maxWidth + "px";
        },
        //mousemove事件
        mouseMoveFn(e) {
            if (this.mouseMoveState) {
                let width = e.clientX - this.beginClientX;
                if (width > 0 && width <= this.maxWidth) {
                    document.getElementsByClassName("handler")[0].style.left =
                        width + "px";
                    document.getElementsByClassName("drag_bg")[0].style.width =
                        width + "px";
                } else if (width > this.maxWidth) {
                    this.successFunction();
                }
            }
        },
        //mouseup事件
        moseUpFn(e) {
            this.mouseMoveState = false;
            var width = e.clientX - this.beginClientX;
            if (width <this.maxWidth) {
                document.getElementsByClassName("handler")[0].style.left =
                    0 + "px";
                document.getElementsByClassName("drag_bg")[0].style.width =
                    0 + "px";
            }
        }
    },
    mounted() {
        this.maxWidth =
            this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
        document
            .getElementsByTagName("html")[0]
            .addEventListener("mousemove", this.mouseMoveFn);
        document
            .getElementsByTagName("html")[0]
            .addEventListener("mouseup", this.moseUpFn);
    }
};
</script>
<style scoped>
.drag {
    position: relative;
    background-color: #ebebeb;
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: 0px solid #ccc;
    border-radius: 4px;
}
.handler {
    width: 69px;
    height: 42px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    cursor: move;
}
.handler_bg {
    background: #fff
        url("")
        no-repeat center;
}
.handler_ok_bg {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: #fff url("~@/assets/img/success.png") no-repeat center;
    background-size: 20px 20px;
}
.drag_bg {
    background-color: #0094ff;
    height: 42px;
    width: 0px;
    border-radius: 4px 0 0 4px;
}
.drag_text {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
}
</style>